<template>
  <el-row>
    <el-col :span="14">
      <el-tag>病史内容:</el-tag>
      <div class="iHref">
        <i @click="$alert('暂存')" class="el-icon-upload2">暂存</i>
        <i @click="$alert('取出暂存')" class="el-icon-download" style="margin-left: 5%">取出暂存</i>
      </div>

      <el-button round class="quick" v-if="button1Show" @click="showOutStart">快捷操作></el-button>
      <el-button round class="quick" v-if="button2Show" @click="showOutEnd">快捷操作<</el-button>
      <div>
        <div>
          <el-form-item label="主诉" class="outpatientCatalogInput">
            <el-input type="textarea" v-model="outPatientForm.chiefComplaint"></el-input>
          </el-form-item>
          <el-form-item label="现病史" class="outpatientCatalogInput">
            <el-input type="textarea" v-model="outPatientForm.historyOfPresentIllness"></el-input>
          </el-form-item>
          <el-form-item label="现病治疗情况" class="outpatientCatalogInput">
            <el-input type="textarea" v-model="outPatientForm.historyOfTreatment"></el-input>
          </el-form-item>
          <el-form-item label="既往史" class="outpatientCatalogInput">
            <el-input type="textarea" v-model="outPatientForm.pastHistory"></el-input>
          </el-form-item>
          <el-form-item label="过敏史" class="outpatientCatalogInput">
            <el-input type="textarea" v-model="outPatientForm.allergies"></el-input>
          </el-form-item>
          <el-form-item label="体格检查" class="outpatientCatalogInput">
            <el-input type="textarea" v-model="outPatientForm.healthCheckup"></el-input>
          </el-form-item>
          <el-form-item label="发病日期" class="outpatientCatalogInput">
            <el-date-picker type="date" placeholder="选择日期" v-model="outPatientForm.startDate"></el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-button type="primary" round @click="assessmentShowButton">评估诊断:</el-button>
          <el-card>
            <el-button type="primary" round style="float:right;" @click="drawer = true">添加诊断</el-button>
            <el-drawer title="病症模板" :visible.sync="drawer" :with-header="false">
              <el-table :data="diseData" @row-click="diseDataTransfer">
                <el-table-column prop="icd" label="ICD编码"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="code" label="编码"></el-table-column>
                <el-table-column align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDiseList"
              />
            </el-drawer>
            <el-table :data="assessmentData">
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-delete"
                    @click="outDel(scope.$index,scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="id" label="ID" v-if="idHid"></el-table-column>
              <el-table-column prop="icd" label="ICD编码"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="code" label="编码"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['dms:case_history:add']"
              style="float:right;"
            >保存修改</el-button>
          </el-card>
        </div>
      </div>
      <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
    </el-col>

    <el-col :span="10">
      <div id="quickShow" v-if="showOut">
        <el-row>
          <el-tabs v-model="firstChoice">
            <el-tab-pane label="病历模板" name="outMedical">
              <div>
                <el-table :data="recordData" @row-click="handleShow" @row-dblclick="recordDataTransfer">
                  <el-table-column
                    prop="name"
                    label="病历名">
                  </el-table-column>
                  <el-table-column
                    prop="priliminaryDiseStrList"
                    label="主要诊断">
                  </el-table-column>
                </el-table>
                <el-form v-if="show">
                  <el-form-item :label="outModelTitle" style="padding: 10px">
                  </el-form-item>
                  <el-form-item>
                    <el-input type="text" disabled v-model="chiefComplaint"></el-input>
                    <el-input type="text" disabled v-model="historyOfPresentIllness"></el-input>
                    <el-input type="text" disabled v-model="historyOfTreatment"></el-input>
                    <el-input type="text" disabled v-model="pastHistory"></el-input>
                    <el-input type="text" disabled v-model="allergies"></el-input>
                    <el-input type="text" disabled v-model="healthCheckup"></el-input>
                    <el-input type="text" disabled v-model="outPatientForm.priliminaryDiseStrList"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="常用就诊" name="judge">
              <div>
                <el-table :data="getMedicineListData" @row-dblclick="diseFrequentDataTransfer">
                  <el-table-column prop="name" label="名称"></el-table-column>
                  <el-table-column prop="code" label="编码"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="历史病历" name="historyOut">
              <div>
                <el-table :data="historyOutPatientDataListen">
                  <el-table-column prop="chiefComplaint" label="历史症状"></el-table-column>
                  <el-table-column prop="healthCheckup" label="健康状态"></el-table-column>
                  <el-table-column prop="priliminaryDiseStrList" label="病症"></el-table-column>
                  <el-table-column prop="startDate" label="发病时间"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import {listDms_case_model,getDms_case_model,listDise,getDise,listPatient,getMedicineList} from "@/api/dms/outpatient_page"
  export default {
    props:['historyOutPatientDataListen'],
    data(){
          return{
            getMedicineListData:[],
            idHid:false,
            outPatientForm:{
              //主区域表单输入框内容
              chiefComplaint: '',
              historyOfPresentIllness: '',
              historyOfTreatment: '',
              pastHistory: '',
              allergies: '',
              healthCheckup: '',
              startDate: '',
              priliminaryDiseIdList:'',
              priliminaryDiseStrList : '',
            },
            //控制抽屉框的必要操作
            drawer:false,
            drawer1:false,
            //初始tab菜单位置
            firstChoice: 'outMedical',
            //病症抽屉框的搜索
            search: '',
            //病历模板表格数据
            recordData:{},
            //病历模板表单输入框数据
            outModelTitle: '',
            chiefComplaint : '',
            historyOfPresentIllness : '',
            historyOfTreatment : '',
            pastHistory : '',
            allergies :'',
            healthCheckup : '',
            //控制各种组件显隐
            show: false,
            showOut : false,
            button1Show: true,
            button2Show: false,
            assessmentShow: false,
            //病症列表表格数据
            diseData:{},
            //分页操作
            queryParams: {
              pageNum: 1,
              pageSize: 7,
              status: null,
              name: null,
              aim: null,
              code: null,
              type: null,
            },
            total: 0,
            //临时存储病症数据的表格数据
            assessmentData:[],
            //病患信息数据
            pmsPatientData:[],
            //对应患者历史病历数据
            historyOutPatient:[]
          }
      },
      created() {
        this.getCaseModelList();
        this.getDiseList();
        this.getListPatient();
        this.getMedicineList();
      },
      methods:{
        getMedicineList(){
          this.loading = true;
          getMedicineList().then(response => {
            this.total = response.total;
            this.getMedicineListData = response.rows;
            this.loading = false;
          })
        },
        //获取对应患者历史病历
        //获取病症集合并渲染到表格中
        getDiseList() {
          this.loading = true;
          listDise(this.queryParams).then(response => {
            this.total = response.total;
            this.diseData = response.rows;
            this.loading = false;
          })
        },
        //控制临时病症数据列表显隐
        assessmentShowButton() {
          if (this.assessmentShow == false) {
            this.assessmentShow = true;
          } else {
            this.assessmentShow = false;
          }
        },
        //获取病人信息
        getListPatient(){
          this.loading = true;
          listPatient(this.queryParams).then(response => {
            this.total = response.total;
            this.pmsPatientData = response.rows;
            this.loading = false;
          })
        },
        //病症模板数据集合
        getCaseModelList() {
          this.loading = true;
          listDms_case_model(this.queryParams).then(response => {
            this.total = response.total;
            this.recordData = response.rows;
            this.loading = false;
          })
        },
        //控制按钮显隐
        showOutEnd() {
          if (this.showOut == true) {
            this.showOut = false;
            this.button1Show = true;
            this.button2Show = false;
          }
        },
        showOutStart() {
          if (this.showOut == false) {
            this.showOut = true;
            this.button1Show = false;
            this.button2Show = true;
          }
        },
        //控制模板显隐
        handleShow(row) {
          this.show = true;
          const id = row.id || this.ids
          getDms_case_model(id).then(response => {
            this.outModelTitle = response.data.name;
            this.chiefComplaint = "主述:" + response.data.chiefComplaint;
            this.historyOfPresentIllness = "症状:" + response.data.historyOfPresentIllness;
            this.allergies = "过敏史:" + response.data.allergies;
            this.healthCheckup = "健康检查:" + response.data.healthCheckup;
            this.historyOfTreatment = "治疗情况:" + response.data.historyOfTreatment;
            this.outPatientForm.priliminaryDiseStrList = "主要诊断:" + response.data.priliminaryDiseStrList;
            this.pastHistory = "既往史:" + response.data.pastHistory;
          });
        },
        diseDataTransfer(row,event,column) {
          this.$confirm('添加一条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(this.checkDiseData(row.icd)){
              getDise(row.id).then(response => {
                this.assessmentData.push({
                  id: response.data.id,
                  icd: response.data.icd,
                  code: response.data.code,
                  name: response.data.name
                });
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
              })
            }else{
              this.$message({
                type:'warning',
                message:'已有此数据，不能重复添加！'
              })
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            });
          });

        },
        checkDiseData(icd){
          let list = this.assessmentData;
          for(var i=0;i < list.length;i++){
            if(icd==list[i].icd){
              return false;
            }
          }
          return true;
        },
        outDel(index,row){
          this.$confirm('是否确认删除'+"'"+row.name+"'"+'此条数据?',"警告",{
            confirmButtonText:"确定",
            cancelButtonText:"取消",
            type:"warning"
          }).then(() =>{
            this.assessmentData.splice(index,1);
            this.msgSuccess("删除成功");
          })
        },
        recordDataTransfer(row){
          if(row.priliminaryDiseIdList!=null){
            //整一个病症id的字符串
            let diseListId = row.priliminaryDiseIdList;
            //若有多个id，将字符串按照逗号分割
            let diseSplitList = diseListId.split(",");
            for(var i = 0;i < diseSplitList.length;i++){
              getDise(parseInt(diseSplitList[i])).then(response => {
                this.assessmentData.push({
                  id: response.data.id,
                  icd: response.data.icd,
                  code: response.data.code,
                  name: response.data.name
                });
              });
            }
          }
          getDms_case_model(row.id).then(response => {
            this.outPatientForm.chiefComplaint = response.data.chiefComplaint;
            this.outPatientForm.historyOfPresentIllness = response.data.historyOfPresentIllness;
            this.outPatientForm.historyOfTreatment = response.data.historyOfTreatment;
            this.outPatientForm.pastHistory = response.data.pastHistory;
            this.outPatientForm.allergies = response.data.allergies;
            this.outPatientForm.healthCheckup =response.data.healthCheckup;
            /*this.date1 = response.data.*/
          })
        },
        //新增一条初诊病历信息
        handleAdd(){
          this.$emit("outPatientFormListen",[this.outPatientForm,this.assessmentData]);
         /**/
        },
        diseFrequentDataTransfer(row){
          if(this.checkDiseData(row.icd)){
            getDise(row.id).then(response => {
              this.assessmentData.push({
                id: response.data.id,
                icd: response.data.icd,
                code: response.data.code,
                name: response.data.name
              });
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
            })
          }else{
            this.$message({
              type:'warning',
              message:'已有此数据，不能重复添加！'
            })
          }
        }
      }
    }
</script>

<style scoped>
  .temporary{
    vertical-align:middle;
    margin-left: 5%;
    color: blue;
  }
  .quick{
    float: right;
    margin-right: 5%;
  }
  .outpatientCatalogInput{
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .iHref {
    display: inline;
    margin-left: 5%;
    color: #409EFF;
  }

</style>
